<template>
  <div>
    <el-card class="mt-20">
      <el-button
        type="primary"
        :disabled="!categoryStore.category3Id"
        @click="addSpu"
      >
        添加SPU
      </el-button>
      <el-table :data="spuDataList" border class="mt-10" v-loading="loading">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column label="SPU名称" prop="spuName" />
        <el-table-column label="SPU描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              :icon="Plus"
              size="small"
              title="添加SKU"
              @click="isShowAddSku()"
            />
            <el-button
              type="warning"
              :icon="Edit"
              size="small"
              title="修改SPU"
              @click="isShowAddSpu(row)"
            />
            <el-button
              type="info"
              :icon="InfoFilled"
              size="small"
              title="查看SKU列表"
            />
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
              title="删除SPU"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-20"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[3, 6, 9]"
        layout=" prev, pager, next, jumper, ->, sizes, total"
        @current-change="handelCurrenChange"
        @size-change="handelSizeChange"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "spuList",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { useCategoryStore } from "@/stores/category";
import { useSpuStore } from "@/stores/spu";
import type {
  SpuArguments,
  SpuPageList,
  spuPinia,
} from "@/api/product/type/spuType";
import { SPUAttrListApi } from "@/api/product/spu";
import { Edit, Plus, InfoFilled, Delete } from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(3);
const total = ref(100);
const loading = ref(false);
const spuDataList = ref<SpuPageList>([]);
const categoryStore = useCategoryStore();
const spuStore = useSpuStore();
const emit = defineEmits(["isShowAddSpu"]);
// 添加spu
const addSpu = () => {
  emit("isShowAddSpu", 2);
  spuStore.$reset();
};
// 添加sku
const isShowAddSku = () => {
  emit("isShowAddSpu", 3);
};
// 修改spu
const isShowAddSpu = (row: spuPinia) => {
  emit("isShowAddSpu", false);
  spuStore.spu = row;
};
// 当前页码变化发送请求
const handelCurrenChange = () => {
  getSpuList();
};
// 每页条数发生变化发送请求
const handelSizeChange = () => {
  getSpuList();
};
// 封装spu数据请求
const getSpuList = async () => {
  loading.value = true;
  const res = await SPUAttrListApi({
    page: currentPage.value,
    limit: pageSize.value,
    category3Id: categoryStore.category3Id as number,
  });
  total.value = res.total;
  spuDataList.value = res.records;
  loading.value = false;
};
// 监视category3Id，变化就请求数据
watch(
  () => categoryStore.category3Id,
  async (newVal) => {
    if (!newVal) {
      spuDataList.value = [];
      total.value = 0;
      return;
    }
    getSpuList();
  },
  { immediate: true }
);
</script>

<style scoped></style>
